<template>
    <div class="header">
        <div class="header-left" @click="gohome">锦曼JinMan</div>
        <div class="header-center" contenteditable="true">请输入您要查找的旗袍<span class="iconfont">&#xe62b;</span></div>
        <div class="header-right"><span class="iconfont" @click="gocart">&#xe600;</span></div>
    </div>
</template>


<script>
export default {
    methods:{
        gohome(){
           this.$router.push('/') 
        },
        gocart(){
            this.$router.push('/shopcart')
        }
    }
}
</script>


<style scoped>
.header{ 
    width: 100%;
    display:flex;
    background:  #591514;
    height: 2.5rem;
    color: #fff;
    font-size: .7rem;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 555;
}
.header .header-center{
    flex:1;
    border: 1px solid #fff;
    border-radius: 10px;
    text-indent: 1rem;
    line-height: 1.5rem;
    margin: auto;
    outline: 0;
}
.header-center span{
    float: right;
    margin-right:3%;
    font-size: 1rem; 
}
.header-left,.header-right{
    margin:0 3%;
    line-height: 2.5rem;      
}
.header-right span{
    font-size: 1rem; 
}
</style>
